Spring spray :: Responsive Multi-purpose HTML5 Template

Created: 04/11/2014
latest Update: 04/11/2014
By: abmathasuriya
Email: abmathasuriya@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form abmathasuriya on ThemeForest. Thanks so much!

Overview

Spring spray Template is built using Bootstrap v3.1.1 framework: Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the HTML folder. The main HTML folder consists of 4 more folders for diferent types of theme assets:

img - folder contain all images for the theme design
js - folder contain all jquery plugin
fonts - Folder contain font file for Font Awesome Icons
css - folder contain all CSS files for the theme.
email.php - PHP script for mail functionality.
Subscribe.php - PHP script for subscribe form.

Installation

This is an HTML theme and doesn't require installation in the traditional meaning of the word. You only need to place the content (HTML files and the folders) in your prefered web directory

Keep in mind that the folder structure and file/folder names are important for theme to work in correct order.

HTML

The theme is based on Bootstrap v3.0.0 framework. The general template structure is the same throughout the template. Here is the general structure.

Navigation
Home
About
Counter
Quotes
Team
Services
Process blocks
Separator Action Penal
Portfolio
Clients
Testimonials
News and fun
Price List
blog
Contact Form
Video Separator
Footer

Below are the general HTML structure of all pages.

Further div class "site-wrapper" contains following section.

Each section further described in Explaining every section

CSS

The theme comes with CSS (stylesheet) files grouped in the css folder:

1. bootstrap.css Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

2. style.css is the main CSS file containg the layout styling of the pages.

3. blog.css is the main CSS file containg the layout styling of the blog pages.

4. nav-style1.css is the main CSS file containg the layout styling of the Header Navigation menu.

5. font-awesome.min.css contains the iconic font style.

6. owl.carousel.css contains style owl touch slider

7. animate.css contains style for content animation

8. swipebox.css contains style for swipebox plugin

9. cubeportfolio.css contains style for portfolio plugin

10. jquery.bxslider.css contains style for bxslider plugin

11. font-face.css is the main CSS file containg the font-face.

The main sections of the style.css are separated by comments and the classes are named with clear names for better understanding and easier navigation.

Fonts

This theme uses Raleway google fonts.

JavaScript

This template is heavily loaded with both custom JS functions and free jQuery plugins. All JS files are placed in a separate folder called "js". The list of files are as under:

jquery.js
bootstrap.min.js
owl.carousel.min.js
jquery.cubeportfolio.min.js
jquery.placeholder.js
jquery.stellar.js
waypoints.min.js
wow.min.js
jquery.cubeportfolio.min.js
jquery.bxslider.js
nprogress.js
jquery.counterup.min.js
jquery.easing.1.3.min.js
carousel-slider.js
jquery.tweet.js
idangerous.swiper-2.4.min.js
jquery.fancybox.pack.js
velocity.min.js
script.js

Some of the jQuery plugins are heavily customized and chages in their files are not recommended.

All JS functions related to the theme content management are placed in theme.js. The script.js file is responsible for the main functions and all slider initialization script.

Explaining every pages

This section explains how every page section is implemented.

NAVIGATION

The navigation menu, Div containing id "header" contains brand logo and nav contains unordered list class "cd-primary-nav" contains manu.

navigation menu visibility control by JavaScript function. The smooth scroll effect is controlled by jQuery plugin. The screenshot below explains code for navigation menu.
logo menu

All navigation menu style contains in style.css file

HOME SECTION

Div containing id "home-content" contains fullscreen swiper slider. Div containing id "swiper-slide" contains background image and header text and sub-text with action button. on scroll parallax effect is control by custom javascript in script.js file and jquery plugin.

Below are the general HTML structure home section.

All home page style contains in style.css file.

ABOUT SECTION

All html in this section is nested within a section with an id of "about". About section contains:

about us header
About us intro blocks

Div containing id "about" contains about us section heading and sub-heading text. Article id "about-intro" contains abous us intro block with icon, text title. Below are the general HTML structure for about us section.

process

All styles for this section in style.css style

QUOTE SEPERATOR

All html in this section is nested within a section with an id of "section-separator". section seperator contains text rotator text and action button. Used custom javascript for text rotator. Below are the general HTML structure for this section.

process

All styles for this section in style.css style

TEAM SECTION

All html in this section is nested within a section with an id of "team".

Div containing class "pentagon" contains individual team member with image, title, sub-title and social icon links. Below are the general HTML structure for this section.

process

All styles for this section in style.css style

COUNTER SECTION

All html in this section is nested within a section with an id of "facts-section".

Div containing id "facts" contains individual facts number and text title. Below are the general HTML structure for this section.

process

All styles for this section in style.css style

SERVICES SECTION

All html in this section is nested within a div with an id of "services". Service section contains:

Service Heading and sub-heading
service block
Feature slider

Div containing id "service-intro" contains individual service block with icon and service name. Below are the general HTML structure for service block.

Div containing id "feature" contains feature slider with heading text and sub heading with navigation arrow. Used custom javascript and jquery plugin. Below are the general HTML structure. process-block

All style contains in style.css file

PROCESS SECTION

All html in this section is nested within a section with an id of "process".

Div containing class "grid" contains individual process block with text and icon. Below are the general HTML structure for this section.

process

All styles for this section in style.css style

PORTFOLIO

The next code shows an example of works/portfolio grid. All html in this section is nested within a div with an id of "our-work". Below are the general html for work section.

Portfolio section contains following blocks

Portfolio heading : HEader containing class "section-header" contains section heading and sub-heading
Portfolio filter : Div containing id "filters-container" contains filter tag to filter portfolio thumbnail based on the filter name.
portfolio thumbnail grid with links to open full work details and lightbox. Div containing id "grid-container" contains unordered list class "cbp-item" contains thumbnail project image and caption title with link to open full detail and view large image in lightbox. Below are the general HTML structure for thumbnail section.
Portfolio load more button: Div containing class "cbp-l-loadMore-button" loads portfolio grid via ajax.
Project full detail contains project title and sub-title, project image slider, project full detail and related project blocks. Below are the general HTML structure for project detail page.

All work/portfolio styles in cubeportfolio.css and style.css file

Used jquery plugin jquery.cubeportfolio.js for portfolio section.

CLIENT SECTION

All html in this section is nested within a section with a class "client-logo" . Div containing id "clients" contains clients slider images. Below are the general HTML structure for client section.